/**
 * 维护内容面板（覆盖聊天界面）
 */
import { LeftOutlined } from '@ant-design/icons'
import { MemSubject } from '@gnlab/utils/rx'
import { fullAbsolute, colors, flexCol } from '@/desktop/styles'

/**
 * 控制当前显示的面板内容
 */
type PanelComponent = () => React.ReactNode
export const panelSubject = new MemSubject<PanelComponent | null>(null)

const defaultClose = () => panelSubject.next(null)

/**
 * 需用此组件包裹面板内容，以保证样式正确
 */
export function CoverPanel({
  title,
  extra,
  children,
  onClose,
}: {
  title: React.ReactNode
  extra?: React.ReactNode // 显示在 header 右侧的额外内容
  children: React.ReactNode // 面板内容
  onClose?: () => void // 自定义返回按钮行为
}) {
  return <div css={s.wrap}>
    <header>
      <LeftOutlined css={s.close} onClick={onClose ?? defaultClose} />
      <h2>{title}</h2>
      {extra}
    </header>
    {children}
  </div>
}

const s = {
  wrap: css`
    ${fullAbsolute};
    ${flexCol};
    background-color: #fff;
    z-index: 2;
    padding: 35px 50px 0;

    & > header {
      align-items: center;
      display: flex;
      margin-bottom: 5px;
      h2 {
        margin: 0;
        flex: 1;
      }
    }
  `,
  close: css`
    font-size: 18px;
    margin-left: -6px;
    padding: 8px 12px 8px 6px;
    &:hover {
      color: rgba(0, 0, 0, 0.65);
    }
  `,
}

/**
 * SiderItem 在 open 时的样式
 */
export const siderOpenStyle = css`
  &,
  & > .title {
    color: ${colors.link};
  }
  &:not(.collapsed),
  &.collapsed .icon-content {
    background-color: #fff;
  }
`
